<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
<!--    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">-->
    <link href="http://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">

</head>
<body>
<div class="ui secondary  menu">
    <a class="item" href="/home"><i class="home icon"></i>
        主页
    </a>
    <a class="item" href="/progress"><i class="space shuttle icon"></i>
        进程管理
    </a>
    <a class="active item" href="/task"><i class="tasks plane icon"></i>
        作业调度
    </a>
    <a class="item" href="{% url 'test_list' %}"><i class="database icon"></i>
        存储管理
    </a>
    <a class="item" href="/disk"><i class="box icon"></i>
        磁盘调度
    </a>
</div>

<hr class="half-rule">
<div class="ui container">
    <div class="ui segment">
    <div class="ui segment">
    <div class="ui purple progress" data-value="0" data-total="100" id="progress">
        <div class="bar">
            <div class="progress"></div>
        </div>
        <div class="label">作业运行进度</div>
    </div>
    </div>

    <div class="ui divider"></div>
        <div class="ui segment">
        <div class="ui fluid grid">
            <div class="four wide column">
                <div class="ui left icon fluid input ">
                    <input type="text" id="num" placeholder="总任务数...">
                    <i class="boxes icon"></i>
                </div>
            </div>

            <div class="four wide column">
                <div class="ui left icon fluid input">
                    <input type="text" id="time" placeholder="时间片长度...">
                    <i class="dna icon"></i>
                </div>
            </div>
            <div class="four wide column">
<div class="ui fluid selection dropdown">
  <input type="hidden" name="gender" id="gender">
  <i class="dropdown icon"></i>
  <div class="default text">方法选择</div>
  <div class="menu">
    <div class="item" data-value="func1" data-text="先来先服务">
      先来先服务
    </div>
    <div class="item" data-value="func2" data-text="短作业优先">
      短作业优先
    </div>
    <div class="item" data-value="func3" data-text="时间片轮转">
      时间片轮转
    </div>
  </div>
</div>
            </div>
            <div class="two wide column">
                <button class="ui fluid blue icon button increase" onclick="DataInit()">作业初始化<i class="whmcs icon"></i></button>
            </div>
            <div class="two wide column">
                <button class="ui fluid teal icon button increase" onclick="DataDo()">开始<i class="rocket icon"></i></button>
            </div>
        </div>
    </div>
    <div class="ui divider"></div>
    <div class="ui segment">
<div class="ui form">
  <div class="field">
    <label>任务初始化：</label>
    <textarea id="text" rows="12"></textarea>
  </div>
</div>
    </div>
    <div class="ui segment">
<div class="ui form">
  <div class="field">
    <label>运行信息：</label>
    <textarea id="text2" rows="12"></textarea>
  </div>
</div>
    </div>
</div>
</div>


<script type="text/javascript">
        function DataInit() {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8000/taskinit/",
            data: {
            num: $("#num").val(),
            time: $("#time").val(),
            },
            success: function (data) {
                var msg = eval("(" + data + ")");
                document.getElementById("text").innerHTML = msg["ans"] ;
            },
            error: function (message) {
                console.log(message);
            }
        });
    }

    function DataDo(){
        var stopTime = 0;
       $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8000/taskcalculate/",
            data: {
            num: $("#num").val(),
            time: $("#time").val(),
            func: $("#gender").val(),
            },
            success: function (data) {
                console.log(data);
                stopTime = eval("(" + data + ")")["stop"];
                var timesRun = 0;
                var interval = setInterval(function (){ //因为ajax是异步执行，需要放到回调函数里面，固定执行顺序
                    if (timesRun == stopTime) {
                        clearInterval(interval);
                    }
                   $.ajax({
                        type: "POST",
                        url: "http://127.0.0.1:8000/taskbytime/",
                        data: {
                        time: timesRun,
                        num: $("#num").val(),
                        },
                        success: function (data) {
                            var msg = eval("(" + data + ")");
                            document.getElementById("text2").innerHTML = msg["ans"] ;
                            if (msg["finish"]==true){
                            $('#progress').progress({
                                percent: msg["percent"] ,
                                text: {
                                    active: '运行完成!'
                                }
                            })} else {
                                $('#progress').progress({
                                percent: msg["percent"] ,
                                text: {
                                    active: '正在运行'
                                }
                            });
                            }
                        },
                        error: function (message) {
                            console.log(message);
                        }
                    });
                    timesRun += 1;
                }, 1000);
            },
            error: function (message) {
                console.log(message);
            }
        });
    }



    $(document).ready(function () {
        $('.ui.dropdown')
          .dropdown();
        console.log("+++", document.getElementById("text"));
    });
</script>

</body>

</html>
